<template>
  <div class="app-container">
    <div class="tab-panel">
      <el-radio-group v-model="tabValue" class="tab" size="small">
        <el-radio-button v-hasPermi="[merchantRechargeOrder]" label="1">购买记录</el-radio-button>
        <el-radio-button v-hasPermi="[merchantBackendRecharge]" label="2">充值记录</el-radio-button>
      </el-radio-group>
      <el-form :inline="true">
        <el-form-item label="购买时间：" style="margin-bottom: 0;">
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="-"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"/>
        </el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      </el-form>
    </div>
    <purchaseRecord v-if="tabValue==1" ref="purchaseRecord" />
    <topupRecord v-if="tabValue==2" ref="topupRecord" />

  </div>
</template>

<script>
import purchaseRecord from './purchaseRecord'
import topupRecord from './topupRecord'
export default {
  components: {
    purchaseRecord,
    topupRecord
  },
  data() {
    return {
      merchantRechargeOrder: 'admin:merchantRechargeOrder',
      merchantBackendRecharge: 'admin:merchantBackendRecharge',
      tabValue: '',
      value: ['', '']
    }
  },
  created() {
    const user = this.$store.state.user
    const perms = user.perms
    // console.log(perms)
    const flag = !!perms.find(item => item == this.merchantRechargeOrder)
    if (flag || perms[0] == '*') return this.tabValue = 1
    const flag1 = !!perms.find(item => item == this.merchantBackendRecharge)
    if ((flag1 || perms[0] == '*') && !flag) return this.tabValue = 2
  },
  methods: {
    handleFilter() {
      if (this.tabValue === '1') {
        this.$refs.purchaseRecord.handleFilter(this.value)
      }
      if (this.tabValue === '2') {
        this.$refs.topupRecord.handleFilter(this.value)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.tab-panel{
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
</style>
